<template>
  <div>
    <div
      style="position: absolute;left:0;height:386px;right:0;top:69px"
      :style="{background:swiperList[swiperCur].color}"
    >
      <el-carousel
        height="386px"
        style="width: 1200px;margin:0 auto"
        @change="changeSwiper"
        :interval="5000"
      >
        <el-carousel-item v-for="item in swiperList" :key="item.url">
          <img :src="item.url" alt style="width: 100%;height:386px" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="height: 386px;"></div>
    <div class="content">
      <div class="left">
        <MyTop title="热门推荐" :hide='true'/>
        <div class="f1">
          <GeItem v-for="(v,i) in tjList.slice(0,9)" :data='v' style="margin-bottom: 30px;" :key="'a'+i" />
        </div>
        <MyTop title="歌单" @click="$router.push('/dizhi')"/>
        <div class="f2">
         <GedanItem v-for="v in gdList.slice(0,5)" :data='v'/>
        </div>
        <MyTop title="榜单" @click="$router.push('/cart?type=1')"/>
        <div class="f3">
          <div>
<div class="topp">
  <img src="https://p2.music.126.net/0SUEG8yDACfx0Bw2MYFv4Q==/109951170048519512.jpg?param=100y100" alt="">
  <div>热歌榜</div>
</div>
<div class="item" v-for="(v,i) in regeList" :key="'c'+i" @click="play(v.id)">
  <span style="display: inline-block;width:20px" :style="{color:i<=2?'red':''}">{{ i+1 }}</span> <span class="a">{{ v.name }}</span>
</div>
<div class="item" style="text-align: right;padding-right: 20px;" @click="$router.push('/cart?type=1')">查看更多></div>
          </div>
          <div>
<div class="topp">
  <img src="https://p3.music.126.net/5guhqPBTcIrrhLBotgaT6w==/109951170048511751.jpg?param=100y100" alt="">
  <div>新歌榜</div>
</div>
<div class="item" v-for="(v,i) in xingeList" :key="'e'+i" @click="play(v.id)">
  <span style="display: inline-block;width:20px" :style="{color:i<=2?'red':''}">{{ i+1 }}</span> <span class="a">{{ v.name }}</span>
</div>
<div class="item" style="text-align: right;padding-right: 20px;"  @click="$router.push('/cart?type=2')">查看更多></div>
          </div>
          <div>
<div class="topp">
  <img src="https://p3.music.126.net/BaP9nrocNTL3gGThysv4eQ==/109951170091896587.jpg?param=100y100" alt="">
  <div>原创榜</div>
</div>
<div class="item" v-for="(v,i) in yuanchuangList" :key="'f'+i" @click="play(v.id)">
  <span style="display: inline-block;width:20px" :style="{color:i<=2?'red':''}">{{ i+1 }}</span> <span class="a">{{ v.name }}</span>
</div>
<div class="item" style="text-align: right;padding-right: 20px;"  @click="$router.push('/cart?type=3')">查看更多></div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <div style="font-weight: bold;">入驻歌手</div>
          <div style="color: #666;cursor: pointer;" @click="$router.push('/dingdan')">查看全部</div>
        </div>
        <div @click="$router.push('/geshou?id='+v.id)" class="item" v-for="(v,i) in geshouList" :key="'g'+i">
          <img style="width: 62px;height: 62px;"
            :src="v.img"
            alt
          />
          <div>{{ v.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GedanItem from "@/components/GedanItem"
import MyTop from "@/components/MyTop";
import GeItem from "@/components/GeItem";
import Xindie from "@/components/Xindie";
import api from "@/api/index"
export default {
  components: { MyTop, GeItem, Xindie,GedanItem },
  data() {
    return {
      geshouList:[],
      regeList:[],
      gdList:[],
      tjList:[],
      yuanchuangList:[],
      xingeList:[],
      swiperCur: 0,
      swiperList: [
        {
          url:
            "https://p1.music.126.net/dcsoazRuar2ITSdy0UWflg==/109951170498845328.jpg?imageView&quality=89",
          color: "rgb(208,225,232)"
        },
        {
          url:
            "https://p1.music.126.net/ZGIbAuzkwvL-8T5JAW6DvQ==/109951170498924258.jpg?imageView&quality=89",
          color: "rgb(234,241,249)"
        },
        {
          url:
            "https://p1.music.126.net/ac_F7trtujcc4bhMPNhlTg==/109951170498918055.jpg?imageView&quality=89",
          color: "rgb(5,5,5)"
        },
        {
          url:
            "https://p1.music.126.net/D__ZqVVEH8zRWumFBJwROA==/109951170501420723.jpg?imageView&quality=89",
          color: "rgb(198,204,236)"
        },
        {
          url:
            "https://p1.music.126.net/d98JtZ23AB1Kluo-NiMUhA==/109951170499066756.jpg?imageView&quality=89",
          color: "rgb(226,58,59)"
        }
      ]
    };
  },
  methods: {
    changeSwiper(e) {
      this.swiperCur = e;
      console.log(e);
    },
    play(id){
     this.$router.push("/xiangqing?id="+id)
    }
  },
  mounted(){
    api.getTuijian({uid:this.$store.state.user.id}).then(res=>{
      this.tjList=res.data
      console.log(res,"=============");
    })
     api.gedanlist().then(res=>{
this.gdList=res.data
    })
    api.getGeshou({size:10,page:1}).then(res=>{
      this.geshouList=res.data.list
    })
    api.getYinyue({size:10,page:1,type:1}).then(res=>{
      this.regeList=res.data.list
    })
    api.getYinyue({size:10,page:1,type:2}).then(res=>{
      this.xingeList=res.data.list
    })
    api.getYinyue({size:10,page:1,type:3}).then(res=>{
      this.yuanchuangList=res.data.list
    })
  }
};
</script>
<style lang="scss" scoped>
.content {
  background-color: white;
  display: flex;
  .left {
    padding: 20px;
    overflow: hidden;
    flex: 1;
    .f3{
      .item{
        font-size: 14px;
      &:hover{
        .a{
          border-bottom: 1px solid #333;
        }
      }
        cursor: pointer;
        height: 40px;
        padding-left: 20px;
        line-height: 40px;
        &:nth-child(2n){
          background-color: rgb(232,232,232);
        }
      }
      .topp{
        padding: 20px;
display: flex;
color: #333;
font-weight: bold;
font-size: 16px;
>div{
  margin-left: 20px;
  margin-top: 20px;
}
      }
      
      margin-top: 20px;
      display: flex;
      background-color: rgb(244,244,244);
      // height: 400px;
      border: 1px solid #ddd;
      >div{
        flex: 1;
        &:not(&:nth-child(1)){

          border-left: 1px solid #ddd;
        }
      }
    }
    .f2 {
      padding: 20px 34px;
      margin-bottom: 40px;
      display: flex;
      margin-top: 20px;
      background-color: #f5f5f5;
      background-origin: 1px solid #fff;
      > div {
        margin-right: 23px;
      }
    }
    .f1 {
      //  border: 1px solid red;
      padding: 22px 0;
      display: flex;
      width: 900px;
      flex-wrap: wrap;
      > div {
        margin-right: 40px;
      }
    }
  }
  .right {
    padding: 20px;
    flex-shrink: 0;
    border-left: 1px solid #ddd;
    width: 260px;
    .header {
      margin-bottom: 20px;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      justify-content: space-between;
    }
    .item {
      margin-bottom: 10px;
      display: flex;
      border: 1px solid #e9e9e9;
      > div {
        font-size: 14px;
        font-weight: bold;
        margin-left: 20px;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>